main {
    background-color: #e2f1e6;
}

#why-green-oil-banner {
    position: relative;
    margin-top: 7rem;
    height: 1000px;
}

#why-green-oil-banner .title {
    position: absolute;
    top: 10%;
    left: 20%;
}

#why-green-oil-banner .banner {
    position: absolute;
    top: 2%;
    left: 60%;
    width: 400px;
}


#why-green-oil-banner .button {
    position: absolute;
    bottom: 55%;
    left: 25%;
}

#why-green-oil-reasons {
    position: relative;
    height: auto;
    margin-top: 1.75rem;
}

#why-green-oil-reasons .green-area {
    /*-webkit-clip-path: polygon(10% 0, 100% 24%, 91% 74%, 0% 100%);*/
    /*clip-path: polygon(10% 0, 100% 24%, 91% 74%, 0% 100%);*/
    -webkit-clip-path: polygon(8% 0, 100% 11%, 94% 80%, 0% 100%);
    clip-path: polygon(8% 0, 100% 11%, 94% 80%, 0% 100%);
    background-color: #789b3e;
    height: 400px;
    width: 80%;
    position: relative;

}

#why-green-oil-reasons .green-area .title-img {
    position: absolute;
    top: 70px;
    left: 16%;
}

#why-green-oil-reasons .blueish-area {
    /*-webkit-clip-path: polygon(16% 0, 100% 0, 83% 100%, 0% 100%);*/
    /*clip-path: polygon(16% 0, 100% 0, 83% 100%, 0% 100%);*/
    -webkit-clip-path: polygon(5% 7%, 100% 0, 93% 91%, 0% 100%);
    clip-path: polygon(5% 7%, 100% 0, 93% 91%, 0% 100%);
    background-color: #e2f1e6;
    width: 80%;
    position: absolute;
    top: 143px;
    left: -78px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;

    padding: 2rem 8rem 1rem 4rem;
    height: auto;
}

#why-green-oil-reasons .blueish-area p {
    font-family: FuturaGreek;
    font-size: 29px;
    font-weight: 500;
    color: #3e5039;
    line-height: 1.2;
}

#why-green-oil-reasons .blue-decor {
    position: absolute;
    z-index: 3;
    right: 60px;
    top: 240px;
    /*    ;*/
}

#why-green-oil-reasons .blue-decor.rotated {
    transform: rotate(300deg);
    bottom: 20%;
    top: auto;
}

#why-green-oil-reasons .green-lower-decor {
    position: absolute;
    bottom: 60px;
    z-index: 2;
    left: 50px;
}

#why-green-oil-reasons .green-lower-decor.last {
    left: auto;
    right: 50px;
}


#why-green-oil-reasons .green-dark-area {
    /*-webkit-clip-path: polygon(8% 0, 100% 0, 93% 100%, 0% 100%);*/
    /*clip-path: polygon(8% 0, 100% 0, 93% 100%, 0% 100%);*/
    -webkit-clip-path: polygon(8% 0, 100% 0, 93% 100%, 5% 95%);
    clip-path: polygon(8% 0, 100% 0, 93% 100%, 5% 95%);

    background-color: #3e5039;
    height: auto;
    width: 90%;
    /* position: absolute; */
    /* top: 191px; */
    /* left: 47px; */
    z-index: 1;
    padding-bottom: 150px;
    margin-top: -230px;
    margin-left: 45px;
    padding-top: 10px;

}

#why-green-oil-reasons .green-dark-area .area-content {
    margin-top: 250px;
    /*display: flex;*/
    margin-left: 150px;
    position: relative;
}

#why-green-oil-reasons .green-dark-area .area-content h1 {
    font-family: FuturaGreekCo;
    font-size: 53px;
    font-weight: bold;
    font-stretch: condensed;
    color: #729954;

}

#why-green-oil-reasons .green-dark-area .area-content ul {
    padding: 0;
    width: 76%;
    list-style: none;
}

#why-green-oil-reasons .green-dark-area .area-content ul li {
    margin-bottom: 2.5rem;
    font-family: FuturaGreek;
    font-size: 27px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.1px;
    color: #fefefe;
}

#why-green-oil-reasons .green-dark-area .area-content ul li::before {
    content: "\2022";
    color: #729954;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

#why-green-oil-team {
    /*height: 600px;*/
    margin-top: 1rem;
    position: relative;
    /*background-image: url("/dist/images/Pr/bioDieselFooter.svg");*/
    /*background-repeat: no-repeat;*/
    /*background-size: contain;*/
    /*background-position: bottom;*/
}

#why-green-oil-team .team-photos {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-bottom: 7rem;
}

.video {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#why-green-oil-team .lower-footer-image {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.youtube-player {
    position: relative;
    cursor: pointer;
    margin: auto;
}

.youtube-player img {
    width: 100%;
    height: auto;
}

.youtube-player.pristine::before {
    background-image: url('/media/yt_play_btn.svg');
    background-size: cover;
    display: inline-block;
    width: 100px;
    height: 100px;
    content: "";
    position: absolute;
    top: 35%;
    left: 45%;
    margin-top: -15px;
    margin-left: -25px;
    transition: opacity .2s ease;
}


.youtube-player.pristine:hover::before {
    opacity: .7;
}

@media (min-width: 1201px) {
    #why-green-oil-banner .title {
        position: absolute;
        top: 10%;
        left: 20%;
    }

    #why-green-oil-banner .banner {
        position: absolute;
        top: 2%;
        left: 60%;
    }

    #why-green-oil-banner .button {
        position: absolute;
        bottom: 55%;
        left: 25%;
    }
}

@media (min-width: 1440px) {
    #why-green-oil-reasons .blueish-area {
        left: -155px;
    }

    /*#why-green-oil-banner .title {
        position: absolute;
        top: 10%;
        left: 13%;
    }

    #why-green-oil-banner .button {
        position: absolute;
        bottom: 27%;
        left: 15%;
    }*/
}


@media (max-width: 1199px) {
    #why-green-oil-banner .title {
        top: 3%;
        left: 102px;
    }

    #why-green-oil-banner .banner {
        top: 4%;
        left: 56%;
    }

    #why-green-oil-banner .button {
        bottom: 59%;
        left: 150px;
    }

    #why-green-oil-reasons .blue-decor {
        right: 6px;
        top: 243px;
    }

    #why-green-oil-reasons .green-dark-area .area-content {
        margin-top: 269px;
        margin-left: 120px;
    }

    .youtube-player img {
        width: 655px;
        height: 353px;
    }
}


@media (max-width: 969px) {
    #why-green-oil-banner {
        height: 860px;
    }

    #why-green-oil-banner .title {
        top: 5%;
        left: 50px;
        width: 45%;
    }

    #why-green-oil-banner .button {
        bottom: 56%;
        left: 83px;
    }

    #why-green-oil-banner .banner {
        top: 2%;
        left: 54%;
        width: 300px;
    }

    #why-green-oil-reasons .blueish-area p {
        font-size: 22px;
    }

    #why-green-oil-reasons .blue-decor {
        width: 26%;
    }

    #why-green-oil-reasons .green-lower-decor {
        bottom: 100px;
        width: 30%;
    }

    #why-green-oil-reasons .green-lower-decor.last {
        width: 30%;
    }

    #why-green-oil-team .team-photos {
        flex-direction: column;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    #why-green-oil-team .team-photos .photo {
        width: 100%;
    }

    .youtube-player img {
        width: 635px;
        height: 342px;
    }

    /*.video {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 150px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }*/
    .video .file {
        width: 100%;
    }

    /*#why-green-oil-team .row.video img {*/
    /*width: 635px;*/
    /*height: 342px;*/
    /*}*/

}

@media (max-width: 749px) {
    #why-green-oil-banner {
        height: 724px;
    }

    #why-green-oil-banner .title {
        top: 3%;
        left: 20px;
        width: 300px;
    }

    #why-green-oil-banner .banner {
        top: 7%;
        left: 50%;
        width: 240px;
    }

    #why-green-oil-banner .button {
        bottom: 58%;
        left: 28px;
        width: auto;
        height: auto;
    }

    #why-green-oil-banner .button img {
        width: 173px;
        object-fit: contain;
    }

    .youtube-player img {
        object-fit: contain;
        width: 100%;
        /* margin-left: 1rem; */
    }

    #why-green-oil-reasons .blue-decor,
    #why-green-oil-reasons .green-lower-decor,
    #why-green-oil-reasons .green-lower-decor.last {
        display: none;
    }

    #why-green-oil-reasons .green-area {
        width: 98%;
    }

    #why-green-oil-reasons .blueish-area p {
        font-size: 19px;
    }

    #why-green-oil-reasons .blueish-area {
        -webkit-clip-path: polygon(5% 7%, 100% 0, 100% 91%, 0% 100%);
        clip-path: polygon(5% 7%, 100% 0, 100% 91%, 0% 100%);
        padding: 2rem 2rem 1rem 2rem;
        width: 100%;
        left: -3px;
    }

    #why-green-oil-reasons .green-dark-area .area-content ul {
        width: 90%;
    }

    #why-green-oil-reasons .green-dark-area {
        width: 100%;
        z-index: 1;
        padding-bottom: 150px;
        margin-top: -230px;
        margin-left: -5px;
        padding-top: 10px;
    }

    #why-green-oil-reasons .green-dark-area .area-content {
        margin-top: 196px;
        margin-left: 100px;
    }

    #why-green-oil-team .team-photos {
        width: 90%;
    }

    .video {
        flex-direction: column;
        width: 100%;
    }

}

@media (max-width: 480px) {
    #why-green-oil-banner {
        height: 527px;
    }

    #why-green-oil-banner .title {
        top: 10%;
        left: 36px;
        width: 72%;
    }

    #why-green-oil-banner .banner {
        top: 25%;
        right: 4%;
        width: 230px;
    }

    #why-green-oil-banner .button {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    #why-green-oil-reasons .blueish-area {
        left: -14px;
        width: 102%;
    }

    #why-green-oil-reasons .green-dark-area .area-content {
        margin-top: 376px;
        margin-left: 60px;
    }

    #why-green-oil-reasons .green-dark-area .area-content h1 {
        font-size: 33px;
    }

    #why-green-oil-reasons .green-dark-area {
        -webkit-clip-path: polygon(5% 7%, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(5% 7%, 100% 0, 100% 100%, 0% 100%);
    }

    #why-green-oil-reasons .blueish-area p {
        font-size: 22px;
    }

    .youtube-player.pristine::before {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 780px) {

.video {
    left: 3%;
    top: 48%;
}}

.lower-footer-image{
  object-fit: contain;
    width: 100%;
    }
    
@media (max-width: 480px){
#why-green-oil-banner .banner {
   
    width: 188px;
}}